<template>
  <div ref="main" id="main" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
  mounted() {
    this.drawChart();
  },
  props:{
    data: {
      type: Object
    }
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      // let myChart = this.$echarts.init(document.getElementById("main"));
      let myChart = this.$echarts.init(this.$refs.main);
      let pixelSeries = [];
      console.log(this.data,'获取到的数据')
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
              // Use axis to trigger tooltip
              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
          },
        backgroundColor: "",
        legend: {
          type: "scroll",
          itemWidth: 15,
          itemHeight: 16,
          orient: "vartical",
          data: ["上游", "中游", "下游"],
          top: "10%",
          right: "0",
          padding: [0, 0],
          itemGap: 23,
          textStyle: {
            color: "#FFFFFF",
          },
        },
        grid: {
          left: "3%",
          right: "14%",
          bottom: "3%",
          top:'0%',
          containLabel: true,
        },
        xAxis: {
          type: "value",
          splitLine: { show: false },
          axisTick: { show: false },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#01F3F5",
            },
          },
          axisLabel: {
            show: false,
            textStyle: {
              color: "#01F3F5",
              fontSize: 12,
            },
            rotate: 30,
          },
        },
        yAxis: {
          type: "category",
          // data: [
          //   "虎丘区",
          //   "吴中区",
          //   "相城区",
          //   "姑苏区",
          //   "吴江区",
          //   "常熟市",
          //   "张家港市",
          //   "昆山市",
          //   "太仓市",
          // ],
          data:this.data.area,
          splitLine: { show: false },
          axisTick: { show: false },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#D7F4FE",
            },
          },
        },
        series: [
          {
            name: "上游",
            type: "bar",
            stack: "总量",
            barWidth: 10,
            itemStyle: {
              normal: {
                color: "#2F79F4",
              },
            },
            label: {
              normal: {
                show: false,
                position: "insideRight",
              },
            },
            z: 10,
            // data: [320, 302, 301, 543, 320, 302, 301, 543, 543],
            data:this.data.upNum
          },
          {
            name: "中游",
            type: "bar",
            stack: "总量",
            itemStyle: {
              normal: {
                color: "#A342E7",
              },
            },
            label: {
              normal: {
                show: false,
                position: "insideRight",
                textStyle: {
                  color: "#6601FF",
                },
              },
            },
            z: 5,
            // data: [90, 230, 210, 432, 320, 302, 301, 543, 543],
            data:this.data.midNum
          },
          {
            name: "下游",
            type: "bar",
            stack: "总量",
            itemStyle: {
              normal: {
                color: "#86DEDE",
              },
            },
            label: {
              normal: {
                show: false,
                position: "insideRight",
                textStyle: {
                  color: "#6601FF",
                },
              },
            },
            z: 5,
            // data: [90, 230, 210, 432, 320, 302, 301, 543, 543],
            data:this.data.downNum
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style></style>
